<template>
	<view class="centerContainer">
		<!-- 用户登录显示信息 -->
		<view class="user" v-if="userInfo.nickName">
			<image class="avator" :src="userInfo.avatarUrl" ></image>
			<view class="username" >{{userInfo.nickName}}</view>
			<image class="arrow_right" src="../../static/images/center/icon_arrow_right_darkgray.png"></image>
		</view>
		<view v-else class="user">
			<image class="avator" src="../../static/images/center/defaule_avtar.png" ></image>
			<view class="username" @click="toLogin">请登录</view>
			<image class="arrow_right" src="../../static/images/center/icon_arrow_right_darkgray.png"></image>
		</view>
		<!-- 我的订单 -->
		<view class="myOrder">
			<view class="order_text">
				我的订单
			</view>
			<image class="order_img" src="../../static/images/center/icon_arrow_right_darkgray.png" mode=""></image>	
		</view>
		<!-- 订单导航 -->
		<view class="orderNav">
			
			<view class="navItem" v-for="(navItem,index) in centerList[0].data.list" :key='navItem.iid'>
				<image class="navItem_img" :src="navItem.img" mode=""></image>
				<text class="navItem_text">{{navItem.title}}</text>
			</view>
			
		</view>
		<!--  工具楼层-->
		<view class="tool" v-for="(item,index) in centerList[1]" :key='index'>
			<view class="wrap">
				<image class="tool_img" :src="item.img" ></image>
				<text class="tool_text">{{item.title}}</text>
				<image class="tool_arrow" src="../../static/images/center/icon_arrow_right_darkgray.png" ></image>
			</view>
			
		</view>
		<view class="splitLine"></view>
		<view class="tool" v-for="(item,index) in centerList[2]" :key='index'>
			<view class="wrap">
				<image class="tool_img" :src="item.img" ></image>
				<text class="tool_text">{{item.title}}</text>
				<image class="tool_arrow" src="../../static/images/center/icon_arrow_right_darkgray.png" ></image>
			</view>
			
		</view>
		
	</view>
</template>

<script>
import {mapGetters} from 'vuex'
export default {
	data() {
		return {
			userInfo:{}
		}
	},
	computed: {
		...mapGetters(['centerList'])
	},
	mounted() {
		this.getCenterList()
		//从本地存储拿取用户信息
		this.getUserInfo()
	}, 
	methods: {
		// 获取展示信息
		getCenterList() {
			this.$store.dispatch('getCenterList')
		},
		// 去到登陆页面
		toLogin(){
			wx.navigateTo({
				url:`/pages/login/login?redirect=${this.__route__}`
				// url:`/pages/login/login?redirect=pages/center/center`
			})
		},
		//从本地存储拿取用户信息
		async getUserInfo(){
			//从本地存储拿取用户信息
			const result = await wx.getStorageSync('userInfo')
			this.userInfo = result
		}
	},

}
</script>

<style lang="scss">
.centerContainer {
	height: 100%;
	background-color: #f3f3f3;
// 用户信息
	.user {
		display: flex;
		align-items: center;
		height: 200rpx;
		background-color: #845f3f;
		padding: 0 50rpx;
		.avator {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
		}
		.username {
			flex: 1;
			font-size: 28rpx;
			color: #ffffff;
			padding-left: 40rpx;
		}
		.arrow_right {
			width: 36rpx;
			height: 36rpx;
		}
	}
// 我的订单
	.myOrder{
		height: 82rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40rpx;
		margin-top: 10rpx;
		.order_img{
			height: 30rpx;
			width: 30rpx;
		}
	}
// 订单导航
	.orderNav{
		display: flex;
		padding: 0 40rpx;
		align-items: center;
		justify-content: space-between;
		background-color: #FFFFFF;
		margin-top: 6rpx;
		margin-bottom: 10rpx;
		height: 140rpx;
		.navItem{
			display: flex;
			flex-direction: column;
			align-items: center;
			.navItem_img{
				width: 80rpx;
				height: 80rpx;
			}
			.navItem_text{
				font-size: 26rpx;
				color: rgba(0, 0, 0, 0.6);
			}
		}
	}
// 工具
	.tool{
		height: 100rpx;
		display: flex;
		align-items: center;
		padding-right:40rpx;
		background-color: #FFFFFF;
		// margin-top: 4rpx;
		.wrap{
			height: 100rpx;
			width: 100%;
			display: flex;
			align-items: center;
			border-bottom: 4rpx solid #F3F3F3;
			padding-left: 40rpx;
			.tool_img{
				width: 76rpx;
				height: 76rpx;
			}
			.tool_text{
				flex: 1;
				font-size: 28rpx;
				color: #333333;
				// color: red;
			}
			.tool_arrow{
				width: 30rpx;
				height: 30rpx;
			}
		}

	}
// 分割线 splitLine
	.splitLine{
		margin-top: 10rpx;
	}
}
</style>
